簡介：知道什么是手風(fēng)琴效果嗎？當(dāng)鼠標(biāo)滑過一排列表時(shí)，鼠標(biāo)懸停的列表項(xiàng)會發(fā)生明暗度的變化，同時(shí)圖片會放大顯示。本課程通過講解浮動布局、遮罩層、CSS3的transition屬性、鼠標(biāo)事件等知識點(diǎn)，教你實(shí)現(xiàn)鼠標(biāo)懸停時(shí)圖片明暗度變化、圖片伸縮以及圖片切換時(shí)速度的平滑過渡等效果等
第1章 案例展示及實(shí)現(xiàn)原理分析
明確什么是手風(fēng)琴效果？以及實(shí)現(xiàn)這個效果用到的知識點(diǎn)進(jìn)行分析。
第2章 用HTML+CSS實(shí)現(xiàn)手風(fēng)琴效果頁面制作
本部分內(nèi)容分為兩個部分，先用HTML搭建頁面的基本結(jié)構(gòu)，再用CSS實(shí)現(xiàn)頁面的樣式。
第3章 用JavaScript實(shí)現(xiàn)手風(fēng)琴效果
用JavaScript實(shí)現(xiàn)對手風(fēng)琴效果，重點(diǎn)講解綁定和懸停的構(gòu)造函數(shù)的使用方法和寫法。
第4章 總結(jié)
對實(shí)現(xiàn)手風(fēng)琴效果的各個步驟中用到的知識點(diǎn)進(jìn)行總結(jié)。